<template>
  <div>
    <h1>HouseDetail</h1>
    <button @click="$router.back()">返回</button>
    <!-- pre 标签专门用来显示代码的标签 -->
    <pre>{{ houseInfo }}</pre>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  name: 'HouseDetailPage',
  data() {
    return {
      houseInfo: {} // 房屋信息
    }
  },
  async created() {
    // 如何获取到传过来的路由参数呢？
    // 获取查询参数：this.$route.query.xxx
    // 获取路径参数：this.$route.params.xxx
    const res = await axios({
      method: 'GET',
      url: 'http://www.xiaoshuaipeng.com:8080/houses/' + this.$route.params.id,
      
      // 【注意：】axios 的 params 是 查询参数
      // params
      // axios 的 data 是请求体参数
      // data

      // axios 的 headers 是请求头参数
      // headers
    })

    this.houseInfo = res.data.body

  }
}
</script>

<style>

</style>